前言

在程式語言中了解程式的周期是很重要的。

在昨日我們已經先了解variables的一些規則了,其中就有包含Scope的概念,讓我們來好好了解吧!!!

Scope Chain

• 可以由內層讀取外層
• 而外層不能讀取內層
• function scope
• global scope

function scope(){
  var a = 1
  console.log(a); //1
}
scope()
console.log(a)//ReferenceError: a is not defined

以上的程式碼中是正常的現象,相信大家經過昨日的變數區塊有稍微了解。
但以下的呢?

var a = 3
function scope(){
  console.log(a); 
}
scope()
console.log(a)

你能猜到嗎?

其實結果會輸出2個3

var a = 3
function scope(){
  console.log(a); //3
}
scope()
console.log(a)// 3

上面的tips中「可以由內層讀取外層」是很重要的觀念!!!

由於scope function中沒有定義a的變數,所以會一層一層往外查找,直到連global scope都沒有才會跑出reference error。

下面code就可以很清楚的了解function scope

var a = 3
function scope(){
  var a = 10
  function inner(){
    console.log(a) //10
  }
  inner()
}
scope()
console.log(a)// 3

由於inner funtion被呼叫執行console.log(a),但inner中沒有定義a的變數,所以往外查找,而看到scope中有定義a,於是很放心的就reference。

Hoisting

昨天的variables我們很明確的解釋了以下

• var為寬鬆的變數宣告
• 而let、const是嚴謹的並且為block scope

ok,你說那為什麼JavaScript要有這麼麻煩的現象???

function sayHi(para) {
  console.log(`Hello I'm ${para}`)
}

sayHi('Ian') //Hello I'm Ian

如果function都要由上而下從頭寫到尾,不能有任何差錯,並且都先宣告再使用其實對於開發是一件非常惱人的事情!!!

sayHi('Ian') //Hello I'm Ian

function sayHi(para) {
  console.log(`Hello I'm ${para}`)
}

最後總結一下

• 使用let、const開發
• var、let、const 、function都有hoisting,各自有各自的提升現象
• 內層可以讀取外層變數,但外層不能存取內層
• 後面我們都會使用let、const宣告

今天講得比較少,主要是小弟重感冒,等之後覺得需要補充,會再更新的